<template>
	<view class="zaiui-sell-box" :class="show?'show':''">
		<!--标题栏-->
		<bar-search-title bgColor="bg-white" content="鞋子"  @contentTap="searchTap">
		</bar-search-title>
		<!--轮播图-->
		<view class="bg-white zaiui-swiper-box">
			<swiper class="screen-swiper square-dot c" autoplay circular indicator-dots :current="swiperIndex" @change="swiperChange">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="swiper-padding">
						<image :src="item.img" mode="widthFix" />
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!--小图标导航-->
		<view class="zaiui-grid-sm-box">
			<view class="cu-list grid col-5 no-border">
				<block v-for="(item,index) in gridSmList" :key="index" v-if="index < 10">
					<view class="cu-item">
						<view class="grid-icon">
							<image class="icon" :src="item.img" mode="widthFix" />
						</view>
						<text class="text-black">{{item.name}}</text>
					</view>
				</block>
			</view>
		</view>

		<view class="padding-xs bg-white margin-top zaiui-user-info-money-box">
			<view class="text-black text-lg text-bold padding-sm">为什么选卖保</view>
			<view class="grid col-2 money-col">
				<view class="money-item">
					<view class="money-item-view">
						<view class="cu-avatar lg" style="background-image:url(/static/images/my/1.png);" />
						<view class="money-content">
							<view class="text-black text-cut text-bold">多卖35%</view>
							<view class="text-gray text-sm text-cut">平均比回收多卖35%</view>
						</view>
					</view>
				</view>
				<view class="money-item">
					<view class="money-item-view">
						<view class="cu-avatar lg" style="background-image:url(/static/images/my/2.png);" />
						<view class="money-content">
							<view class="text-black text-cut text-bold">成交快</view>
							<view class="text-gray text-sm text-cut">上架24小时必卖</view>
						</view>
					</view>
				</view>
				<view class="money-item">
					<view class="money-item-view">
						<view class="cu-avatar lg" style="background-image:url(/static/images/my/2.png);" />
						<view class="money-content">
							<view class="text-black text-cut text-bold">平台托管</view>
							<view class="text-gray text-sm text-cut">拒绝砍价 托管更省心</view>
						</view>
					</view>
				</view>
				<view class="money-item">
					<view class="money-item-view">
						<view class="cu-avatar lg" style="background-image:url(/static/images/my/1.png);" />
						<view class="money-content">
							<view class="text-black text-cut text-bold">不满可退</view>
							<view class="text-gray text-sm text-cut">质检后出价 不满可退</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="zaiui-view-liucheng">
			<view class="padding-xs bg-white margin-top zaiui-user-info-order-box">
				<view class="text-black text-lg text-bold padding-sm">保卖流程</view>
				<view class="cu-list grid col-4 no-border">
					<view class="cu-item">
						<view class="cu-avatar lg" style="background-image:url(/static/images/home/grid-icon/15.png);" />
						<text class="text-sm">免费取件</text>
					</view>
					<view class="cu-item">
						<view class="cu-avatar lg" style="background-image:url(/static/images/home/grid-icon/25.png);" />
						<text class="text-sm">专业质检</text>
					</view>
					<view class="cu-item" @tap="order_list_tap">
						<view class="cu-avatar lg" style="background-image:url(/static/images/home/grid-icon/26.png);" />

						<text class="text-sm">平台出价</text>
					</view>
					<view class="cu-item">
						<view class="cu-avatar lg" style="background-image:url(/static/images/home/grid-icon/28.png);" />

						<text class="text-sm">急速打款</text>
					</view>
				</view>
			</view>
		</view>
		<view class="buttonArr">
			<button open-type="contact">
				联系客服
			</button>
			<button>
				我的订单
			</button>
		</view>
		<!--占位的-->
		<view class="zaiui-seat-height"></view>
	</view>
</template>

<script>
	import _sort_list_data from '@/static/zaiui/data/sort_list.js'; //虚拟数据
	import _tool from '@/static/zaiui/util/tools.js'; //工具函数
	import barSearchTitle from '@/components/zaiui-common/basics/bar-search-title';
	export default {
		components:{
			barSearchTitle
		},
		data() {
			return {
				swiperIndex: 0,
				swiperList: [],
				gridSmList: []
			}
		},
		props: {
			show: {
				type: Boolean,
				default: true
			},
			scrollY: {
				type: Number,
				default: 0
			},
			scrollBottom: {
				type: Number,
				default: 0
			}
		},
		created() {
			this.swiperList = _sort_list_data.swiperListData();
			this.gridSmList = _sort_list_data.gridSmList();
		},
		onShow() {
			_tool.setBarColor(true);
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
		},
		methods: {
			swiperChange(e) {
				this.swiperIndex = e.detail.current;
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
			},
			goodsSortListTap(e) {
				console.log(e);
			},
			searchTap() {
				console.log(3333)
				uni.navigateTo({
					url: "/pages/home/search"
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/zaiui/style/sort_list.scss";

	.zaiui-sell-box {
		display: none;
	}

	.zaiui-sell-box.show {
		display: block;
	}

	.zaiui-user-info-money-box {
		border-radius: 18.18rpx;

		.money-col {
			padding: 0 9.09rpx 9.09rpx;

			.money-item {
				position: relative;
				padding: 9.09rpx;

				.money-item-view {
					border: 1.81rpx solid #f3f2f3;
					border-radius: 18.18rpx;
					position: relative;
					padding: 9.09rpx;

					.cu-avatar {
						position: absolute;
						left: 9.09rpx;
					}

					.money-content {
						position: relative;
						margin-left: 109.09rpx;
						margin-bottom: 27.27rpx;
						top: 12.72rpx;
					}
				}
			}
		}
	}

	.zaiui-view-liucheng {
		padding: 10rpx 0;
		

		.zaiui-user-info-order-box {
			border-radius: 18.18rpx;

			.cu-list.grid.no-border {
				padding: 0;
			}

			.cu-list.grid.no-border>.cu-item {
				padding-bottom: 9.09rpx;
				margin-bottom: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}

		.cu-list.grid>.cu-item text {
			color: inherit;
		}

		.zaiui-user-info-money-box {
			border-radius: 18.18rpx;

			.money-col {
				padding: 0 9.09rpx 9.09rpx;

				.money-item {
					position: relative;
					padding: 9.09rpx;

					.money-item-view {
						border: 1.81rpx solid #f3f2f3;
						border-radius: 18.18rpx;
						position: relative;
						padding: 9.09rpx;

						.cu-avatar {
							position: absolute;
							left: 9.09rpx;
						}

						.money-content {
							position: relative;
							margin-left: 109.09rpx;
							margin-bottom: 27.27rpx;
							top: 12.72rpx;
						}
					}
				}
			}
		}

		.zaiui-user-info-tools-box {
			border-radius: 18.18rpx;

			.tools-view {
				position: relative;

				.tools-title {
					padding-right: 81.81rpx;
				}

				.tools-right {
					position: absolute;
					right: 9.09rpx;
					bottom: 23.63rpx;
				}
			}

		}
	}
	.buttonArr{
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;
		button{
			width: 40%;
			border: none;
			background-color: #fff;
		}
	}
	.zaiui-seat-height {
		 height:80rpx;
	}
</style>
